<template>
  <el-menu class="top-menu"
           :default-active="activeIndex"
           mode="horizontal"
           text-color="#333">
    <template v-for="(item,index) in items"
              :key="index">
      <el-menu-item :index="item.id+''"
                    @click="openMenu(item)">
        <template #title>
          <icon-temp :text="item[iconKey]"></icon-temp>
          <span>{{ getTitle(item) }}</span>
        </template>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import {mapState} from "pinia";
import useUserStore from "@/stores/useUserStore";
import IconTemp from "../../../components/avue/core/components/icon/index.vue";
import website from "@/config/website";

export default {
  name: "top-menu",
  components: {IconTemp},
  inject: ["index"],
  created() {
    this.getMenu();
  },
  computed: {
    ...mapState(useUserStore, ["menu"]),
    iconKey() {
      return website.menuConfig.icon
    },
  },
  data() {
    return {
      activeIndex: "0",
      items: []
    };
  },

  methods: {
    openMenu(item) {
      this.index.openMenu(item)
    },
    getMenu() {
      useUserStore().GetTopMenu().then(res => {
        this.items = res;
      });
    },
    getTitle(item) {
      return this.$router.$avueRouter.generateTitle(item, website.menuConfig);
    },
  }
};
</script>
